import React, { Component } from 'react'
let {Provider, Consumer} = React.createContext()

class ButtonAddCmp extends Component {
  render() {
    return (
      <Consumer>
        {({handleAdd})=>{
          return (
            <button
            onClick={()=>{handleAdd()}}>
              +
            </button>
          )
        }}
      </Consumer>
    )
  }
}

class ButtonSubCmp extends Component {
  render() {
    return (
      <Consumer>
        {({handleSub})=>{
          return (
            <button
            onClick={()=>{handleSub()}}>
              -
            </button>
          )
        }}
      </Consumer>
    )
  }
}

class Counter extends Component {
  render() {
    return (
      <Consumer>
        {({num})=>{
          return <span>{num}</span>
        }}
      </Consumer>
    )
  }
}

class Test extends Component {
  render() {
    return <div>{this.props.children}</div>
  }
}

export default class App extends Component {
  state = {
    num: 666
  }
  handleAdd = (params)=> {
    this.setState(state=>({
      num: state.num + 1
    }))
  }
  handleSub = (params)=> {
    this.setState(state=>({
      num: state.num - 1
    }))
  }
  render() {
    return (
      <div>
        <Provider
        value={
          {
            num: this.state.num,
            handleAdd: this.handleAdd,
            handleSub: this.handleSub
          }
        }>
          <Test>
            <ButtonAddCmp></ButtonAddCmp>
            <Counter></Counter>
            <ButtonSubCmp></ButtonSubCmp>
          </Test>
        </Provider>
      </div>
    )
  }
}
